<template>
  <div>
    <div class="home-header">
      <SearchHeader />
      <TabBar />
      <Banner />
      <Btns />
    </div>

    <CardList
      title="限时抢购"
      desc="品质好货，限时抢购"
      isTimeout
      :list="shops"
    />
    <CardList title="精品推荐" :list="shops" desc="优质好货，折扣多多" />

    <div>{{ store.getters.testRoot }}</div>
  </div>
</template>

<script lang="ts" setup>
import SearchHeader from "@/components/SearchHeader.vue";
import TabBar from "./components/TabBar.vue";
import Banner from "./components/Banner.vue";
import Btns from "./components/Btns.vue";
import CardList from "./components/CardList/index.vue";
import { shops } from "@/mock/shopList";

import { useStore } from "vuex";
import { onMounted } from "@vue/runtime-dom";

const store = useStore();

onMounted(()=>{
  store.commit('setSumByChild')
})

</script>
<style lang="less" scoped>
.home-header {
  width: 100%;
  position: relative;

  &::before {
    content: "";
    display: block;
    width: 100%;
    height: 180px;
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(
      to bottom,
      rgb(251, 100, 100),
      rgb(248, 66, 66)
    );
    border-radius: 0 0 15% 15%;
  }
}
</style>
